
<template>
  <mu-paper :z-depth="1" class="lan-loadmore-body">
    <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left" v-close>
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>专项会议
      <mu-button icon slot="right" @click="searchcontroll = true">
        <!-- <mu-icon value="more"></mu-icon> -->
        <i class="iconfont iconshaixuan4"></i>
      </mu-button>
    </mu-appbar>
    <mu-container ref="container" class="lan-loadmore-content">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loading="loading"
        @load="load"
        :loaded-all="loadAll"
      >
        <!-- 这里是业务结构 -->
        <mu-paper
          class="lan-card"
          :z-depth="1"
          v-for="(item,index) in data"
          :key="index"
          @click="goDetail(item)"
        >
          <div class="lan-detail">
            <span class="lan-detail-h">项目名称：</span>
            <span class="lan-detail-r">{{item.projectName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议名称：</span>
            <span class="lan-detail-r">{{item.meetName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议类型：</span>
            <span class="lan-detail-r" v-if="item.meetType == '1'">质量周例会</span>
            <span class="lan-detail-r" v-if="item.meetType == '2'">质量专项检查会</span>
            <span class="lan-detail-r" v-if="item.meetType == '3'">其他</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议时间：</span>
            <span class="lan-detail-r">{{item.meetTime}}</span>
          </div>
          <p v-if="loadAll">无更多数据了</p>
        </mu-paper>
      </mu-load-more>
    </mu-container>
    <!-- 详情 -->
    <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="detailController"
      class="lan-dialog"
    >
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="detailController = false">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
专项会议详情
      </mu-appbar>
      <div class="lan-dialog-body">
        <mu-paper class="lan-card">
          <div class="lan-detail">
            <span class="lan-detail-h">项目名称：</span>
            <span class="lan-detail-r">{{Detail.projectName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议名称：</span>
            <span class="lan-detail-r">{{Detail.meetName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议类型：</span>
            <span class="lan-detail-r" v-if="Detail.meetType == '1'">质量周例会</span>
            <span class="lan-detail-r" v-if="Detail.meetType == '2'">质量专项检查会</span>
            <span class="lan-detail-r" v-if="Detail.meetType == '3'">其他</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">会议时间：</span>
            <span class="lan-detail-r">{{Detail.meetTime}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">参会人数：</span>
            <span class="lan-detail-r">{{Detail.meetPeopleNum || '0'}}人</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">创建人：</span>
            <span class="lan-detail-r">{{Detail.createdUserName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">创建时间：</span>
            <span class="lan-detail-r">{{Detail.createdTime}}</span>
          </div>
          <div class="lan-detail">
            <p class="lan-detail-h">图片：</p>
            <div class="img-box">
              <img :preview="index" :src="list" v-for="(list,index) in handurl(Detail.images)" :key="index" />
            </div>
          </div>
          <div class="lan-detail">
            <p class="lan-detail-h">文件：</p>
            <p
              class="lan-detail-r"
              v-for="(list,index) in handurl(Detail.files)"
              :key="index"
              @click="loadFile({url:list,name:list.substr(list.lastIndexOf('/')+1)})"
            >
              <a>{{list.substr(list.lastIndexOf('/')+1)}}</a>
            </p>
          </div>
        </mu-paper>
      </div>
    </mu-dialog>
    <!-- 筛选 -->
    <mu-bottom-sheet :open.sync="searchcontroll">
      <mu-list @item-click="closeBottomSheet">
        <mu-sub-header>筛选条件</mu-sub-header>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;white-space:nowrap;">
            <span class="lan-form-title">开始时间：</span>
            <mu-date-input v-model="form.startTime" container="bottomSheet" label-float></mu-date-input>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;white-space:nowrap;">
            <span class="lan-form-title">结束时间：</span>
            <mu-date-input v-model="form.endTime" container="bottomSheet" label-float></mu-date-input>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;">
            <span class="lan-form-title">项目名称：</span>
            <mu-select v-model="form.projectName" style="padding-bottom:0;margin-bottom:0;">
              <mu-option
                v-for="(option,index) in options"
                :key="index"
                :label="option"
                :value="option"
              ></mu-option>
            </mu-select>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;">
            <span class="lan-form-title">会议名称：</span>
            <mu-text-field v-model="form.meetingName"></mu-text-field>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;">
            <span class="lan-form-title">会议类型：</span>
            <mu-select v-model="form.meetType" style="padding-bottom:0;margin-bottom:0;">
              <mu-option
                v-for="(list,index) in typeList"
                :key="index"
                :label="list.name"
                :value="list.value"
              ></mu-option>
            </mu-select>
          </div>
        </mu-list-item>

        <mu-list-item button>
          <mu-button full-width round color="primary" @click="searchcontroll = false">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-bottom-sheet>
  </mu-paper>
</template>

<script>
export default {
  name: "MapShow",
  data() {
    return {
      refreshing: false,
      loading: false,
      loadAll: false,
      pageSize: "10",
      pageNo: 0,
      data: [],
      detailController: false,
      Detail: {},
      searchcontroll: false,
      options: [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5",
        "Option 6",
        "Option 7",
        "Option 8",
        "Option 9",
        "Option 10"
      ],
      form: {
        select: "",
        startTime: "",
        endTime: "",
        projectName: "",
        meetingName: "",
        meetType: ""
      },
      typeList: [
        { value: "1", name: "质量周例会" },
        { value: "2", name: "质量专项检查会" },
        { value: "3", name: "其他" }
      ]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async refresh() {
      this.refreshing = true;
      this.pageNo = 0;
      this.$refs.container.scrollTop = 0;
      await this.getData();
      this.refreshing = false;
    },
    async getData() {
      if (!this.loadAll) {
        console.log("数据完了1");
        this.pageNo++;
      }
      let obj = {
        obj: {
          // "orgId":this.$A.GS('orgInfo')['orgId'],
          // "type":this.$A.GS('orgInfo')['type'],
        },
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      this.$A.Go("post", "/safety/meeting/select", obj).then(
        success => {
          if (success.code == 200) {
            console.log("数据完了");
            let data = success.body.rows || [];
            let total = success.body.page.rows || "0";
            if (this.pageNo == 1) {
              this.data = data;
            } else {
              this.data.push(...data);
            }
            if (Math.ceil(total / this.pageSize) <= this.pageSize) {
              this.loadAll = true;
            }
          } else {
            if (this.pageNo == 1) {
              this.data = [];
            }
          }
        },
        function(err) {
          console.log(err);
        }
      );
    },
    async load() {
      this.loading = true;
      await this.getData();
      this.loading = false;
    },
    goDetail(list) {
      this.Detail = list;
      this.detailController = true;
    },
    handurl(str) {
      if (!str) {
        return [];
      } else {
        return str.split(",");
      }
    },
    loadFile(list) {
      let a = document.createElement("a");
      a.setAttribute("href", list.url);
      a.setAttribute("download", list.name);
      a.click();
    },
    closeBottomSheet(isnot) {
      // this.open = isnot;
    }
  }
};
</script>

<style lang="scss" scoped>
.lan-card {
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 2px 8px 0px rgba(182, 182, 182, 0.4);
}
.img-box {
  img {
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px 8px;
  }
}
.lan-form-title {
  line-height: 40px;
}
</style>
<style lang="scss">
</style>
